import clsx from 'clsx';

export const LOGO_COLOR_PRIMARY = '#029CD7';
export const LOGO_COLOR_SECONDARY = '#021A23';
export const LOGO_COLOR_SECONDARY_ALT = '#fff';

interface A4ALogoProps {
	full?: boolean;
	fullA4A?: boolean;
	fullA4AV2?: boolean;
	size?: number;
	className?: string;
	colors?: {
		primary?: string;
		secondary?: string;
	};
}

const A4ALogo = ( {
	full = false,
	fullA4A = false,
	fullA4AV2 = false,
	size = 32,
	className,
	colors,
}: A4ALogoProps ) => {
	const classes = clsx( className );
	const primaryColor = colors?.primary || LOGO_COLOR_PRIMARY;
	const secondaryColor = colors?.secondary || LOGO_COLOR_SECONDARY;

	// This has Automattic Logo and text "Automattic"
	if ( full ) {
		// Full "Automattic" logo
		return (
			<svg height={ size } className={ classes } viewBox="0 0 494.35 38.19">
				<path
					d="M179.25 38.19c-12.58 0-20.74-9.07-20.74-18.51v-1.17c0-9.6 8.16-18.51 20.74-18.51 12.58 0 20.81 8.91 20.81 18.51v1.17c0 9.44-8.16 18.51-20.81 18.51Zm14.08-19.58c0-6.88-5-13-14.08-13s-14 6.13-14 13v.86c0 6.88 5 13.12 14 13.12s14.08-6.24 14.08-13.12v-.86Z"
					fill={ primaryColor }
				/>
				<path
					d="M37.12 36.8 32.43 28H11.57L7 36.8H0L19.2 1.28h5.55L44.27 36.8h-7.15ZM21.81 8.21l-7.73 14.94h15.73l-8-14.94ZM74.56 38.19c-12.75 0-18.67-6.94-18.67-16.16V1.28h6.62v20.85c0 6.56 4.32 10.46 12.53 10.46 8.43 0 11.89-3.9 11.89-10.46V1.28h6.67V22c0 8.83-5.6 16.19-19.04 16.19ZM130.72 6.83v30h-6.67v-30h-15.52V1.28h37.71v5.55h-15.52ZM259.47 36.8V8.69l-1.76 3.1-14.88 25h-3.25l-14.72-25-1.76-3.1V36.8h-6.51V1.28h9.23l14 24.37 1.66 3 1.65-3L257 1.28h9.12V36.8h-6.65ZM316.54 36.8l-4.7-8.8H291l-4.53 8.8h-7l19.2-35.52h5.54l19.47 35.52h-7.14ZM301.23 8.21l-7.73 14.94h15.73l-8-14.94ZM350.56 6.83v30h-6.66v-30h-15.52V1.28h37.7v5.55h-15.52ZM399.47 6.83v30h-6.67v-30h-15.52V1.28H415v5.55h-15.53ZM431.42 36.8V4.64c2.66 0 3.73-1.44 3.73-3.36H438V36.8h-6.58ZM490.19 11.31A20.69 20.69 0 0 0 476 5.6c-9.49 0-14.83 6.51-14.83 13.28v.69c0 6.72 5.39 13 15.31 13a20.78 20.78 0 0 0 13.92-5.71l4 4.21a26.53 26.53 0 0 1-18.4 7.12c-13.44 0-21.6-8.75-21.6-18.35v-1.17c0-9.6 8.91-18.67 21.92-18.67 7.52 0 14.35 3.15 18 7.09l-4.13 4.22ZM180.072 13.173l-6.107 9.46a2.58 2.58 0 0 0 .767 3.567l.009.005a2.58 2.58 0 0 0 3.567-.768l6.108-9.46a2.58 2.58 0 0 0-.768-3.566l-.009-.006a2.58 2.58 0 0 0-3.567.768Z"
					fill={ secondaryColor }
				/>
			</svg>
		);
	}
	// This has Automattic Logo and text "Automattic for Agencies"
	if ( fullA4AV2 ) {
		return (
			<svg
				className={ classes }
				height={ size }
				viewBox="0 0 186 27"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<path
					d="M54.0027 5.97754C54.0027 7.74947 55.1397 8.80273 57.2996 8.80273C59.517 8.80264 60.4275 7.74939 60.4275 5.97754V0.345703H62.1824V5.94238C62.1824 8.32747 60.7083 10.3154 57.1726 10.3154C53.8187 10.3153 52.2615 8.44053 52.2615 5.9502V0.345703H54.0027V5.97754ZM84.7136 0C88.0231 0 90.1882 2.40693 90.1882 5V5.31543C90.1882 7.86528 88.0415 10.3154 84.7136 10.3154C81.4043 10.3153 79.2576 7.86522 79.2576 5.31543V5C79.2576 2.40699 81.4043 0.000115191 84.7136 0ZM162.865 0C164.843 5.90525e-05 166.64 0.850837 167.6 1.91504L166.513 3.05469C165.507 2.07008 164.171 1.51844 162.781 1.5127C160.284 1.5127 158.88 3.27099 158.88 5.09961V5.28613C158.88 7.10126 160.297 8.79785 162.907 8.79785C164.272 8.77142 165.579 8.22058 166.569 7.25488L167.621 8.39258C166.308 9.64848 164.575 10.337 162.781 10.3154C159.245 10.3154 157.099 7.9523 157.098 5.35938V5.04297C157.098 2.4499 159.442 0 162.865 0ZM76.03 1.84473H71.947V9.94824H70.1921V1.84473H66.1091V0.345703H76.03V1.84473ZM133.864 1.84473H129.781V9.94824H128.029V1.84473H123.946V0.345703H133.864V1.84473ZM146.733 1.84473H142.648V9.94824H140.893V1.84473H136.81V0.345703H146.733V1.84473ZM49.2048 9.94043H47.324L46.0896 7.56348H40.6023L39.4001 9.94043H37.5583L42.6091 0.345703H44.0691L49.2048 9.94043ZM100.648 6.92871L101.085 7.73828L101.519 6.92871L105.168 0.345703H107.567V9.94043H105.818V2.34766L105.354 3.18457L101.44 9.9375H100.585L96.7126 3.18457L96.2498 2.34766V9.94043H94.5369V0.345703H96.9656L100.648 6.92871ZM122.71 9.94043H120.831L119.594 7.56348H114.112L112.921 9.94043H111.079L116.13 0.345703H117.588L122.71 9.94043ZM152.784 9.94043H151.052V1.25293C151.752 1.25293 152.034 0.864317 152.034 0.345703H152.784V9.94043ZM84.7136 1.51562C82.3253 1.51573 81.0312 3.17092 81.031 5.02637V5.25879C81.031 7.11709 82.3461 8.80262 84.7136 8.80273C87.0813 8.80273 88.4177 7.11715 88.4177 5.25879V5.02637C88.4175 3.16816 87.1021 1.51562 84.7136 1.51562ZM41.2625 6.25293H45.4001L43.2957 2.21777L41.2625 6.25293ZM114.77 6.25293H118.908L116.803 2.21777L114.77 6.25293Z"
					fill={ secondaryColor }
				/>
				<path
					d="M46.0058 18.5299H39.3248V21.2508H44.2964V22.6611H39.3248V26.5358H37.5583V17.0484H46.0058V18.5299Z"
					fill={ secondaryColor }
				/>
				<path
					d="M60.4473 21.9631C60.4473 24.4845 58.2678 26.9062 54.8916 26.9062C51.5297 26.9062 49.3502 24.4845 49.3502 21.9631V21.6497C49.3502 19.0855 51.5297 16.7065 54.8916 16.7065C58.2678 16.7065 60.4473 19.0855 60.4473 21.6497V21.9631ZM58.6524 21.9061V21.6781C58.6524 19.8405 57.3133 18.2023 54.8916 18.2023C52.4699 18.2023 51.1451 19.8405 51.1451 21.6781V21.9061C51.1451 23.7437 52.4699 25.4104 54.8916 25.4104C57.3133 25.4104 58.6524 23.7437 58.6524 21.9061Z"
					fill={ secondaryColor }
				/>
				<path
					d="M74.5027 26.5358H72.893C72.4087 26.5358 72.195 25.8663 72.138 25.0115L72.081 24.0429C72.024 23.1027 71.6394 22.7038 69.8587 22.7038H66.4969V26.5358H64.7162V17.0484H69.8872C72.7363 17.0484 74.0184 18.1881 74.0184 19.6553C74.0184 20.6952 73.4913 21.6781 71.6394 22.02C73.4913 22.1625 73.8902 23.003 73.9044 24.1141L73.9187 24.8976C73.9329 25.5529 74.0469 26.023 74.5027 26.4931V26.5358ZM72.2235 19.9972V19.8832C72.2235 19.1995 71.6679 18.5299 70.1437 18.5299H66.4969V21.379H70.3004C71.6109 21.379 72.2235 20.7522 72.2235 19.9972Z"
					fill={ secondaryColor }
				/>
				<path
					d="M96.1863 26.5358H94.2774L93.0238 24.1853H87.4539L86.2431 26.5358H84.3627L89.491 17.0484H90.9725L96.1863 26.5358ZM92.3258 22.889L90.189 18.9003L88.1234 22.889H92.3258Z"
					fill={ secondaryColor }
				/>
				<path
					d="M109.566 26.5358H108.427L108.156 25.2537C107.244 26.3079 105.948 26.9062 104.338 26.9062C100.976 26.9062 98.7969 24.5984 98.7969 21.9631V21.7921C98.7969 19.0998 101.176 16.7065 104.652 16.7065C106.789 16.7065 108.526 17.5898 109.467 18.6012L108.356 19.7265C107.501 18.9431 106.176 18.2023 104.637 18.2023C101.988 18.2023 100.592 19.8975 100.592 21.7494V21.9061C100.592 23.758 102.088 25.4104 104.509 25.4104C106.347 25.4104 107.657 24.285 107.657 23.1454V23.0457H104.737V21.6354H109.566V26.5358Z"
					fill={ secondaryColor }
				/>
				<path
					d="M122.684 26.5358H114.066V17.0484H122.684V18.5299H115.846V20.9659H121.103V22.4047H115.846V25.0543H122.684V26.5358Z"
					fill={ secondaryColor }
				/>
				<path
					d="M137.111 26.5358H135.573L129.404 20.1824L128.806 19.5129V26.5358H127.025V17.0484H128.735L134.718 23.3876L135.33 24.0714V17.0484H137.111V26.5358Z"
					fill={ secondaryColor }
				/>
				<path
					d="M152.061 18.6012L150.949 19.7265C150.095 18.9431 148.841 18.2023 147.146 18.2023C144.61 18.2023 143.186 19.9402 143.186 21.7494V21.9346C143.186 23.7295 144.625 25.4104 147.274 25.4104C148.855 25.4104 150.166 24.6554 150.992 23.8862L152.061 25.0115C151.021 26.0372 149.254 26.9062 147.16 26.9062C143.57 26.9062 141.391 24.5699 141.391 22.0058V21.6924C141.391 19.1282 143.77 16.7065 147.246 16.7065C149.254 16.7065 151.078 17.547 152.061 18.6012Z"
					fill={ secondaryColor }
				/>
				<path d="M157.981 26.5358H156.2V17.0484H157.981V26.5358Z" fill={ secondaryColor } />
				<path
					d="M171.449 26.5358H162.831V17.0484H171.449V18.5299H164.611V20.9659H169.868V22.4047H164.611V25.0543H171.449V26.5358Z"
					fill={ secondaryColor }
				/>
				<path
					d="M185.192 23.8719C185.192 25.7238 183.17 26.9062 180.349 26.9062C178.426 26.9062 176.645 26.3791 175.178 25.6811L175.833 24.2708C177.329 25.0115 178.91 25.4531 180.434 25.4531C182.486 25.4531 183.397 24.7836 183.397 24.0571C183.397 21.7921 175.449 23.3021 175.449 19.8263C175.449 18.0598 177.357 16.7065 180.363 16.7065C182.229 16.7065 183.967 17.3618 185.036 18.0598L184.067 19.2564C183.184 18.6866 181.731 18.1596 180.306 18.1596C178.454 18.1596 177.229 18.7864 177.229 19.5983C177.229 21.6639 185.192 20.2821 185.192 23.8719Z"
					fill={ secondaryColor }
				/>
				<g clip-path="url(#clip0_6689_16504)">
					<path
						d="M14.5554 27C5.81127 27 0.139404 20.5876 0.139404 13.9136V13.0864C0.139404 6.29929 5.81127 0 14.5554 0C23.2995 0 29.02 6.29929 29.02 13.0864V13.9136C29.02 20.5876 23.3482 27 14.5554 27ZM24.3421 13.1571C24.3421 8.29301 20.8667 3.96622 14.5554 3.96622C8.24405 3.96622 4.82425 8.30008 4.82425 13.1571V13.7651C4.82425 18.6292 8.29966 23.0409 14.5554 23.0409C20.8111 23.0409 24.3421 18.6292 24.3421 13.7651V13.1571Z"
						fill={ primaryColor }
					/>
					<path
						d="M15.1268 9.31317L10.8819 16.0013C10.6239 16.4076 10.5351 16.9016 10.6351 17.3745C10.735 17.8475 11.0156 18.2606 11.4151 18.5231L11.4213 18.5267C11.6192 18.6566 11.8403 18.7456 12.0719 18.7887C12.3036 18.8317 12.5413 18.8279 12.7716 18.7775C13.0018 18.7271 13.22 18.631 13.4138 18.4948C13.6075 18.3586 13.7729 18.185 13.9007 17.9837L18.1462 11.2956C18.404 10.8892 18.4926 10.3954 18.3925 9.92259C18.2924 9.44982 18.0118 9.03684 17.6124 8.77444L17.6062 8.7702C17.4083 8.64026 17.1872 8.55123 16.9556 8.50819C16.7239 8.46516 16.4862 8.46896 16.2559 8.51938C16.0257 8.5698 15.8075 8.66585 15.6138 8.80205C15.42 8.93825 15.2546 9.11193 15.1268 9.31317Z"
						fill={ secondaryColor }
					/>
				</g>
				<defs>
					<clipPath id="clip0_6689_16504">
						<rect width="29.0377" height="27" fill={ secondaryColor } />
					</clipPath>
				</defs>
			</svg>
		);
	}

	// Full "Automattic For Agencies" logo
	if ( fullA4A ) {
		return (
			<svg
				height={ size }
				className={ classes }
				viewBox="0 0 282 58"
				fill="none"
				xmlns="http://www.w3.org/2000/svg"
			>
				<g clipPath="url(#clip0_6816_1592)">
					<path
						d="M107.202 19.4164C100.972 19.4164 96.9319 14.8051 96.9319 10.0056V9.41077C96.9319 4.52998 100.972 0 107.202 0C113.431 0 117.506 4.52998 117.506 9.41077V10.0056C117.506 14.8051 113.465 19.4164 107.202 19.4164ZM114.174 9.46162C114.174 5.96372 111.698 2.85221 107.202 2.85221C102.706 2.85221 100.269 5.9688 100.269 9.46162V9.89885C100.269 13.3968 102.745 16.5693 107.202 16.5693C111.658 16.5693 114.174 13.3968 114.174 9.89885V9.46162Z"
						fill="#3499CD"
					/>
					<path
						d="M36.8237 18.7097L34.5013 14.2356H24.1722L21.9093 18.7097H18.4431L27.9503 0.650772H30.6985L40.3641 18.7097H36.8237ZM29.2427 4.17409L25.4151 11.7698H33.204L29.2427 4.17409ZM55.3627 19.4164C49.0493 19.4164 46.1179 15.888 46.1179 11.2004V0.650772H49.3959V11.2512C49.3959 14.5864 51.5351 16.5693 55.6004 16.5693C59.7746 16.5693 61.4879 14.5864 61.4879 11.2512V0.650772H64.7906V11.1851C64.7906 15.6745 62.0177 19.4164 55.3627 19.4164ZM83.1712 3.47248V18.7249H79.8685V3.47248H72.1835V0.650772H90.8562V3.47248H83.1712ZM146.924 18.7097V4.41813L146.052 5.99422L138.684 18.7046H137.075L129.786 5.99422L128.915 4.41813V18.7097H125.691V0.650772H130.261L137.194 13.0409L138.016 14.5661L138.833 13.0409L145.701 0.650772H150.217V18.7097H146.924ZM175.183 18.7097L172.856 14.2356H162.536L160.293 18.7097H156.827L166.334 0.650772H169.078L178.718 18.7097H175.183ZM167.602 4.17409L163.774 11.7698H171.563L167.602 4.17409ZM192.028 3.47248V18.7249H188.731V3.47248H181.046V0.650772H199.713V3.47248H192.028ZM216.247 3.47248V18.7249H212.944V3.47248H205.259V0.650772H223.937V3.47248H216.247ZM232.068 18.7097V2.35905C233.385 2.35905 233.915 1.62693 233.915 0.650772H235.326V18.7097H232.068ZM261.169 5.75018C259.274 3.89647 256.759 2.85774 254.142 2.84713C249.443 2.84713 246.799 6.15691 246.799 9.59889V9.94969C246.799 13.3662 249.468 16.5591 254.38 16.5591C256.95 16.5094 259.409 15.4738 261.272 13.656L263.253 15.7965C260.782 18.1608 257.519 19.4572 254.142 19.4164C247.487 19.4164 243.447 14.9678 243.447 10.087V9.49212C243.447 4.61133 247.858 0 254.301 0C258.024 0 261.406 1.60151 263.214 3.60467L261.169 5.75018ZM107.609 6.69736L104.585 11.507C104.401 11.7992 104.338 12.1544 104.409 12.4945C104.48 12.8346 104.68 13.1317 104.964 13.3205L104.969 13.323C105.11 13.4165 105.267 13.4805 105.432 13.5114C105.597 13.5424 105.767 13.5397 105.931 13.5034C106.095 13.4671 106.25 13.3981 106.388 13.3001C106.526 13.2022 106.644 13.0773 106.735 12.9326L109.76 8.12296C109.943 7.83073 110.006 7.47559 109.935 7.13561C109.864 6.79563 109.664 6.49865 109.379 6.30995L109.375 6.3069C109.234 6.21345 109.076 6.14943 108.911 6.11848C108.746 6.08753 108.577 6.09027 108.413 6.12653C108.249 6.16278 108.094 6.23186 107.956 6.3298C107.818 6.42774 107.7 6.55264 107.609 6.69736Z"
						fill="black"
					/>
				</g>
				<path
					d="M18.5267 34.8197H5.95136L5.95136 39.941H15.3091V42.5955H5.95136L5.95136 49.8887H2.62653L2.62653 32.0311H18.5267V34.8197ZM45.7091 41.2817C45.7091 46.0276 41.6067 50.5858 35.252 50.5858C28.9241 50.5858 24.8217 46.0276 24.8217 41.2817V40.6918C24.8217 35.8654 28.9241 31.3876 35.252 31.3876C41.6067 31.3876 45.7091 35.8654 45.7091 40.6918V41.2817ZM42.3307 41.1744V40.7454C42.3307 37.2865 39.8102 34.203 35.252 34.203C30.6938 34.203 28.2002 37.2865 28.2002 40.7454V41.1744C28.2002 44.6333 30.6938 47.7704 35.252 47.7704C39.8102 47.7704 42.3307 44.6333 42.3307 41.1744ZM72.1649 49.8887H69.135C68.2234 49.8887 67.8212 48.6285 67.7139 47.0197L67.6066 45.1964C67.4994 43.4267 66.7754 42.6759 63.4238 42.6759H57.0959V49.8887H53.7443V32.0311H63.4774C68.8401 32.0311 71.2532 34.1762 71.2532 36.9379C71.2532 38.8953 70.2611 40.7454 66.7754 41.3889C70.2611 41.657 71.0119 43.239 71.0387 45.3304L71.0655 46.8052C71.0924 48.0386 71.3069 48.9234 72.1649 49.8082V49.8887ZM67.8748 37.5815V37.3669C67.8748 36.0799 66.8291 34.8197 63.9601 34.8197H57.0959V40.1823H64.255C66.7218 40.1823 67.8748 39.0025 67.8748 37.5815ZM112.979 49.8887H109.386L107.026 45.4645H96.5422L94.2631 49.8887H90.7237L100.376 32.0311H103.165L112.979 49.8887ZM105.712 43.0245L101.69 35.5168L97.8024 43.0245H105.712ZM138.163 49.8887H136.018L135.509 47.4755C133.793 49.4597 131.353 50.5858 128.323 50.5858C121.995 50.5858 117.893 46.2421 117.893 41.2817V40.9599C117.893 35.8922 122.37 31.3876 128.913 31.3876C132.935 31.3876 136.206 33.05 137.976 34.9538L135.884 37.072C134.275 35.5973 131.782 34.203 128.886 34.203C123.899 34.203 121.271 37.3938 121.271 40.8795V41.1744C121.271 44.6601 124.086 47.7704 128.645 47.7704C132.103 47.7704 134.57 45.6522 134.57 43.5072V43.3195H129.074V40.665H138.163V49.8887ZM162.854 49.8887L146.632 49.8887V32.0311L162.854 32.0311V34.8197L149.983 34.8197V39.4047L159.877 39.4047V42.1129L149.983 42.1129V47.1001L162.854 47.1001V49.8887ZM190.009 49.8887L187.113 49.8887L175.503 37.93L174.377 36.6698V49.8887H171.025V32.0311H174.243L185.505 43.963L186.658 45.25V32.0311H190.009V49.8887ZM218.148 34.9538L216.056 37.072C214.448 35.5973 212.088 34.203 208.897 34.203C204.125 34.203 201.443 37.4742 201.443 40.8795V41.228C201.443 44.6065 204.151 47.7704 209.139 47.7704C212.115 47.7704 214.582 46.3493 216.137 44.9014L218.148 47.0197C216.19 48.9502 212.866 50.5858 208.924 50.5858C202.167 50.5858 198.065 46.1885 198.065 41.3621V40.7722C198.065 35.9459 202.543 31.3876 209.085 31.3876C212.866 31.3876 216.298 32.9696 218.148 34.9538ZM229.292 49.8887H225.94V32.0311H229.292V49.8887ZM254.642 49.8887H238.42V32.0311H254.642V34.8197H241.771V39.4047H251.665V42.1129H241.771V47.1001H254.642V49.8887ZM280.51 44.8746C280.51 48.3603 276.702 50.5858 271.393 50.5858C267.774 50.5858 264.422 49.5937 261.66 48.2799L262.894 45.6254C265.709 47.0197 268.685 47.8509 271.554 47.8509C275.415 47.8509 277.131 46.5907 277.131 45.2232C277.131 40.9599 262.17 43.8021 262.17 37.2597C262.17 33.9349 265.763 31.3876 271.42 31.3876C274.933 31.3876 278.204 32.621 280.215 33.9349L278.392 36.1872C276.729 35.1146 273.994 34.1226 271.313 34.1226C267.827 34.1226 265.521 35.3023 265.521 36.8307C265.521 40.7186 280.51 38.1177 280.51 44.8746Z"
					fill="black"
				/>
				<defs>
					<clipPath id="clip0_6816_1592">
						<rect width="244.785" height="19.4164" fill="white" transform="translate(18.4431)" />
					</clipPath>
				</defs>
			</svg>
		);
	}

	return (
		// Small Automattic circle logo
		<svg width={ size } height={ size } className={ classes } viewBox="0 0 64 64">
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M53.6471 31.5984C53.6471 21.029 45.9236 11.6027 31.9584 11.6027C17.9933 11.6027 10.3514 21.029 10.3514 31.5984V32.9105C10.3514 43.4815 17.9933 53.0691 31.9584 53.0691C45.9236 53.0691 53.6471 43.4815 53.6471 32.9105V31.5984ZM31.9584 61.6733C12.5696 61.6733 0 47.7437 0 33.2378V31.4371C0 16.6838 12.5696 3 31.9584 3C51.4304 3 64 16.6838 64 31.4371V33.2378C64 47.7437 51.4304 61.6733 31.9584 61.6733Z"
				fill={ primaryColor }
			/>
			<path
				fillRule="evenodd"
				clipRule="evenodd"
				d="M38.8263 22.3617C40.5964 23.5221 41.0927 25.934 39.9441 27.7441L30.9904 41.8447C29.8402 43.6563 27.4737 44.1803 25.7065 43.02C23.9394 41.8566 23.4372 39.4507 24.5888 37.6391L33.5425 23.5385C34.6926 21.7284 37.0591 21.2029 38.8263 22.3617Z"
				fill={ secondaryColor }
			/>
		</svg>
	);
};

export default A4ALogo;
